<template>
	<view class="content">
		<!-- 返回 -->
		<image
			class="return"
			@click="$goReturn(1)"
			src="/static/images/chicken/arrow_go.png"
			mode="widthFix"></image>
		<!-- 规则 -->
		<image
			class="rule"
			@click="showRule"
			src="/static/images/chicken/game/question_rule.png"
			mode="widthFix"></image>
		<!-- 内容区域 -->
		<view class="package-box">
			<!-- 倒计时 -->
			<view class="djs-box">
				<view class="djs-left">
					<view class="left">
						<text>{{ times }}</text>
					</view>
					<view class="right">
						<view
							class="process"
							:style="{
								width: processWidth + '%',
							}"></view>
						<image 
							class="guang"
							v-show="processWidth < 100"
							:style="{
								left: processWidth + '%',
							}"
							src="/static/images/chicken/game/package_process_guang.png"></image>
					</view>
				</view>
				<view class="djs-right">
					<image src="/static/images/chicken/game/package_djs_right.png"></image>
					<text>x{{ redNum }}</text>
				</view>
			</view>
			<!-- 红包盒子 -->
			<view class="red-box">
				<!-- 红包 -->
				<view class="red">
					<image
						class="red-img"
						style="width: 131rpx;"
						:style="{
							left: '15%',
							top: imgTop1 + '%',
							opacity: imgTop1 > 0 ? 1 : 0,
						}"
						@click="clickRed(1)"
						src="/static/images/chicken/game/package_red_1.png"
						mode="widthFix"></image>
					<image
						class="red-img"
						style="width: 131rpx;"
						:style="{
							left: '25%',
							top: imgTop2 + '%',
							opacity: imgTop2 > 0 ? 1 : 0,
						}"
						@click="clickRed(2)"
						src="/static/images/chicken/game/package_red_1.png"
						mode="widthFix"></image>
					<image
						class="red-img"
						style="width: 96rpx;"
						:style="{
							left: '35%',
							top: imgTop3 + '%',
							opacity: imgTop3 > 0 ? 1 : 0,
						}"
						@click="clickRed(3)"
						src="/static/images/chicken/game/package_red_2.png"
						mode="widthFix"></image>
					<image
						class="red-img"
						style="width: 96rpx;"
						:style="{
							left: '45%',
							top: imgTop4 + '%',
							opacity: imgTop4 > 0 ? 1 : 0,
						}"
						@click="clickRed(4)"
						src="/static/images/chicken/game/package_red_2.png"
						mode="widthFix"></image>
					<image
						class="red-img"
						style="width: 96rpx;"
						:style="{
							left: '55%',
							top: imgTop5 + '%',
							opacity: imgTop5 > 0 ? 1 : 0,
						}"
						@click="clickRed(5)"
						src="/static/images/chicken/game/package_red_2.png"
						mode="widthFix"></image>
					<image
						class="red-img"
						style="width: 88rpx;"
						:style="{
							left: '70%',
							top: imgTop6 + '%',
							opacity: imgTop6 > 0 ? 1 : 0,
						}"
						@click="clickRed(6)"
						src="/static/images/chicken/game/package_red_3.png"
						mode="widthFix"></image>
					<image
						class="red-img"
						style="width: 88rpx;"
						:style="{
							left: '85%',
							top: imgTop7 + '%',
							opacity: imgTop7 > 0 ? 1 : 0,
						}"
						@click="clickRed(7)"
						src="/static/images/chicken/game/package_red_3.png"
						mode="widthFix"></image>
				</view>
				<!-- 雨 -->
				<view class="imgs">
					<image
						src="/static/images/chicken/game/package_line_1.png"
						class="img"
						style="width: 26rpx;"
						:style="{
							left: imgLeft1 + '%',
							top: imgTop1 + '%',
							opacity: imgTop1 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
					<image
						src="/static/images/chicken/game/package_line_2.png"
						class="img"
						style="width: 31rpx;"
						:style="{
							left: imgLeft2 + '%',
							top: imgTop2 + '%',
							opacity: imgTop2 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
					<image
						src="/static/images/chicken/game/package_line_3.png"
						class="img"
						style="width: 25rpx;"
						:style="{
							left: imgLeft3 + '%',
							top: imgTop3 + '%',
							opacity: imgTop3 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
					<image
						src="/static/images/chicken/game/package_line_4.png"
						class="img"
						style="width: 22rpx;"
						:style="{
							left: imgLeft4 + '%',
							top: imgTop4 + '%',
							opacity: imgTop4 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
					<image
						src="/static/images/chicken/game/package_line_5.png"
						class="img"
						style="width: 20rpx;"
						:style="{
							left: imgLeft5 + '%',
							top: imgTop5 + '%',
							opacity: imgTop5 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
					<image
						src="/static/images/chicken/game/package_line_6.png"
						class="img"
						style="width: 16rpx;"
						:style="{
							left: imgLeft6 + '%',
							top: imgTop6 + '%',
							opacity: imgTop6 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
					<image
						src="/static/images/chicken/game/package_line_7.png"
						class="img"
						style="width: 34rpx;"
						:style="{
							left: imgLeft7 + '%',
							top: imgTop7 + '%',
							opacity: imgTop7 > 0 ? 1 : 0,
						}"
						mode="widthFix"></image>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				times: 0,
				processWidth: 0,
				timerDjs: null,
				redNum: 0,
				
				imgTop1: 0,
				timer1: null,
				imgLeft1: 15,
				imgTop2: 0,
				timer2: null,
				imgLeft2: 30,
				imgTop3: 0,
				timer3: null,
				imgLeft3: 45,
				imgTop4: 0,
				timer4: null,
				imgLeft4: 60,
				imgTop5: 0,
				timer5: null,
				imgLeft5: 75,
				imgTop6: 0,
				timer6: null,
				imgLeft6: 90,
				imgTop7: 0,
				timer7: null,
				imgLeft7: 105,
				imgArrTime: [],
				
				differentList: [],
			}
		},
		onShow() {
			this.init();
		},
		onReady() {
			
		},
		onHide() {
			this.clearTime();
		},
		methods: {
			init() {
				this.times = 15;
				this.clearTime();
				this.djs();
				this.getImgLeft();
			},
			clearTime() {
				for (let i = 1; i <= 8; i ++) {
					clearInterval(this['timer' + i]);
				}
				clearInterval(this.timerDjs);
			},
			getImgLeft() {
				this.imgArrTime = [];
				for (let i = 1; i < 8; i ++) {
					let left = Number.parseInt(Math.random() * 11);
					this.imgArrTime.push(left);
				}
				this.imgTopChange();
			},
			imgTopChange() {
				this.imgArrTime.forEach((val, index) => {
					let i = index + 1;
					setTimeout(() => {
						this['timer' + i] = setInterval(() => {
							if (this['imgTop' + i] > 100) {
								this['imgTop' + i] = 0;
								this['imgLeft' + i] = 15 * i;
							}
							this['imgTop' + i] += .5;
							this['imgLeft' + i] -= .1
						}, 10);
					}, val * 500);
				});
			},
			djs() {
				this.timerDjs = setInterval(() => {
					this.times -= 1;
					this.processWidth += 100 / 15;
					if (this.times <= 0) {
						clearInterval(this.timerDjs);
						this.processWidth = 100;
						this.imgTop1 = 0;
						this.imgTop2 = 0;
						this.imgTop3 = 0;
						this.imgTop4 = 0;
						this.imgTop5 = 0;
						this.imgTop6 = 0;
						this.imgTop7 = 0;
						this.clearTime();
					}
				}, 1000);
			},
			showRule() {
				console.log('规则');
			},
			clickRed(index) {
				console.log(index);
				this.redNum += 1;
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		background: url('/static/images/chicken/game/package_bg.png') no-repeat center center;
		background-size: 100%;
		.package-box {
			position: absolute;
			left: 0;
			top: 152rpx;
			width: 100%;
			height: 80vh;
			// background-color: rebeccapurple;
			.djs-box {
				display: flex;
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				padding-left: 58rpx;
				color: #fff;
				.djs-left {
					position: relative;
					display: flex;
					align-items: center;
					width: 540rpx;
					height: 60rpx;
					padding-left: 50rpx;
					background: url('/static/images/chicken/game/package_process_bg.png') no-repeat center center;
					background-size: 100% 100%;
					.left {
						position: absolute;
						left: -20rpx;
						top: 0;
						z-index: 1;
						display: flex;
						justify-content: center;
						align-items: center;
						width: 90rpx;
						height: 90rpx;
						margin-top: -16rpx;
						background: url('/static/images/chicken/game/package_clock.png') no-repeat center center;
						background-size: auto 100%;
						font-size: 48rpx;
						text {
							margin-top: 10rpx;
						}
					}
					.right {
						position: relative;
						width: 100%;
						height: 100%;
						.process {
							position: absolute;
							left: 0;
							top: 50%;
							transform: translateY(-50%);
							width: 80%;
							height: 38rpx;
							background: url('/static/images/chicken/game/package_process.png') no-repeat center right;
							background-size: 100% 100%;
							transition: all 1s ease;
						}
						.guang {
							position: absolute;
							left: 80%;
							top: 0;
							width: 60rpx;
							height: 60rpx;
							margin-left: -30rpx;
							transition: all 1s ease;
						}
					}
				}
				.djs-right {
					position: relative;
					width: calc(100% - 540rpx);
					height: 60rpx;
					background: url('/static/images/chicken/game/package_djs_right_bg.png') no-repeat center center;
					background-size: 100% 100%;
					font-size: 36rpx;
					image {
						position: absolute;
						left: 10rpx;
						top: 0;
						width: 60rpx;
						height: 72rpx;
						margin-top: -16rpx;
					}
					text {
						position: absolute;
						right: 16rpx;
						top: 50%;
						transform: translateY(-50%);
					}
				}
			}
			.red-box {
				position: absolute;
				left: 0;
				top: 60rpx;
				width: 100%;
				height: calc(100% - 60rpx);
				overflow: hidden;
				.img, .red-img {
					position: absolute;
					z-index: 1;
					opacity: 0;
				}
				.red-img {
					z-index: 2;
				}
			}
		}
		.return {
			position: absolute;
			left: 26rpx;
			top: 30rpx;
			width: 64rpx;
		}
		.rule {
			position: absolute;
			right: 23rpx;
			top: 10rpx;
			width: 100rpx;
		}
	}
</style>